/*
 * 推荐客户统计
 * @author 孙令浩
 * @time 2018.12.07
 * @since 1.0.0
 * */
// React基础组件
import React from 'react'
// dva 连接组件 - 连接route和model
import { connect } from 'dva'
// 引入antd的组件
import { Row, Col, Card, Button, Tabs, Form, Popconfirm, Modal, Tooltip} from 'antd'
//导入路由组件，用于跳转等
import { Link, hashHistory } from 'dva/router'
// 导入项目全局配置文件
import config from 'config/config'

// 引入model取值工具方法
import { mapStateToProps } from 'utils/view_utils'
//引用listPage
import ListPage from 'widget/PageTmpl/ListPage'
import cx from 'classnames'
// 当前组件样式
import styles from './recommendClientsStatisticsStyle.less'
import { Grid, QueryCondition } from 'widget/Grid/index'
import { AdvanceSearch } from 'widget/CollapsiblePanels/index'
import { chunk } from 'lodash'

/**
 * description 路由视图及事件处理
 * dispatch 分发到models中的effects对应事件名
 * model 用于获取models中state定义的数据
 * form 表单对象
 */

const routeView = function ({dispatch, model, form}) {
  // 表单的子函数
  const {resetFields, getFieldDecorator, validateFields, setFieldsValue} = form
  // 取出model对象，命名空间
  const {modelObj, namespace} = model
  let {loading, btnLoading, modalObj, currentItem, queryList, tableData, pageConfig} = modelObj
  // modelObj.xxx获取model中状态机的值
  console.log('modelObj', modelObj)
  // console.log(queryList[0].value[0]);
  // console.log(queryList[0].value[1]);
  // 点击处理事件
  const clickHandler = (e) => {
    // 分发到model文件中effects的xxx方法
    dispatch({
      type: `${namespace}/xxx`,
      payload: {}
    })
  }


  // 美的置业云推荐客户人数 recommendCount  美的置业云推荐客户成交人数 recommendComplete 分销系统客户人数 disCount  分销系统成客户交人数 disComplete  预约客户人数 appointmentCount 美的置业云预约客户成 appointmentComplete 自来客客户人数 zlkCount 自来客客户成交人数 zlkComplete
  const columns = [
    
    {title: '美的置业云推荐客户人数', dataIndex: 'recommendCount', key: 'recommendCount', 
    render: (a, item, index, d, e, f) => {
      return (
        <span>
          <a style={item.recommendCount!=0?{ color:'#0877FD'}:{ color:"#333"}}  onClick={() => routerGo({appId:1000,type:1,status:0})}>{item.recommendCount}</a>
        </span>
      )
    } },
    {title: '美的置业云推荐客户成交人数', dataIndex: 'recommendComplete', key: 'recommendComplete',
    render: (a, item, index, d, e, f) => {
      return (
        <span>
          <a style={item.recommendComplete!=0?{ color:'#0877FD'}:{ color:"#333"}}  onClick={() => routerGo({appId:1000,type:1,status:1})}>{item.recommendComplete}</a>
        </span>
      )
    } },
    {title: '分销系统客户人数', dataIndex: 'disCount', key: 'disCount', 
    render: (a, item, index, d, e, f) => {
      return (
        <span>
          <a style={item.disCount!=0?{ color:'#0877FD'}:{ color:"#333"}}  onClick={() => routerGo({appId:1004,type:1,status:0})}>{item.disCount}</a>
        </span>
      )
    } },
    {title: '分销系统成客户交人数', dataIndex: 'disComplete', key: 'disComplete',
    render: (a, item, index, d, e, f) => {
      return (
        <span>
          <a style={item.disComplete!=0?{ color:'#0877FD'}:{ color:"#333"}}  onClick={() => routerGo({appId:1004,type:1,status:1})}>{item.disComplete}</a>
        </span>
      )
    }  },
    {title: '预约客户人数', dataIndex: 'appointmentCount', key: 'appointmentCount', 
    render: (a, item, index, d, e, f) => {
      return (
        <span>
          <a style={item.appointmentCount!=0?{ color:'#0877FD'}:{ color:"#333"}}  onClick={() => routerGo({type:2,status:0})}>{item.appointmentCount}</a>
        </span>
      )
    } },
    {title: '美的置业云预约客户成', dataIndex: 'appointmentComplete', key: 'appointmentComplete', 
    render: (a, item, index, d, e, f) => {
      return (
        <span>
          <a style={item.appointmentComplete!=0?{ color:'#0877FD'}:{ color:"#333"}}  onClick={() => routerGo({type:2,status:1})}>{item.appointmentComplete}</a>
        </span>
      )
    } },
    {title: '自来客客户人数', dataIndex: 'zlkCount', key: 'zlkCount',
    render: (a, item, index, d, e, f) => {
      return (
        <span>
          <a style={item.zlkCount!=0?{ color:'#0877FD'}:{ color:"#333"}}  onClick={() => routerGo({type:3,status:0})}>{item.zlkCount}</a>
        </span>
      )
    }  },
    {title: '自来客客户成交人数', dataIndex: 'zlkComplete', key: 'zlkComplete',
    render: (a, item, index, d, e, f) => {
      return (
        <span>
          <a style={item.zlkComplete!=0?{ color:'#0877FD'}:{ color:"#333"}}  onClick={() => routerGo({type:3,status:1})}>{item.zlkComplete}</a>
        </span>
      )
    }  },
    
  ]
  // 表格模板配置
  const gridProps = {
    nameSpace: namespace,
    data: {
      // columns: [].concat(columns, generateAction()),
      columns: columns,
      pageConfig, tableData
    },
    loading
  }
 // 详情页跳转
  function routerGo (query) {
    let startTime = queryList[0].value[0];
    let endTime =queryList[0].value[1];
    if(startTime === undefined && endTime === undefined ){
      // ReactDOM.render(
      //   <Tooltip title="prompt text">
      //   <span>时间不能为空</span>
      // </Tooltip>,
      //    mountNode
      // )
    
     return;
    }
    let querys = {
      ...query,
      startTime:startTime,
      endTime:endTime
    }
    hashHistory.push({ //src\pages\threadAdmin\clientsList
      pathname: '/home/threadAdmin/clientsList',
      query:querys
    })
  }

  //修改状态
  const changeState = (payload) => {
    dispatch({
      type: `${namespace}/updateStore`,
      payload: {...payload}
    })
  }
  //修改状态
  const inputChange = (payload) => {
    let {key, value} = payload
    dispatch({
      type: `${namespace}/inputChange`,
      payload: {
        ...payload
      }
    })
  }
  //查询
  const onSearch = (payload) => {
    dispatch({
      type: `${namespace}/search`,
      payload: payload
    })
  }
 
  return (
    <div className={cx('pageLayout')}>
      <div className="public_listMain">
        <AdvanceSearch
          footer={
            <span>
                <Button type="primary" htmlType="submit" onClick={() => onSearch()} loading={loading}>搜索</Button>
                <Button onClick={() => dispatch({ type: `${namespace}/queryReset` })}>重置</Button>
              </span>
          }
        >
          <QueryCondition
            data={queryList}
            inputChange={(key, value) => dispatch({type: `${namespace}/inputChange`, payload: {key, value}})}
          />
        </AdvanceSearch>
        {/* 表格区域 */}
        <div className="boxShadow">
          {/* 添加用户 */}
          <Grid {...gridProps} />
        </div>
      </div>
    </div>
  )
}

// 连接视图(view)和模型(model)
export default connect(mapStateToProps)(Form.create()(routeView))

